<template>
  <div
      v-if="visible"
      :class="single ? 'single-tabs-container' : 'tabs-contanier'"
      id="tabCard"
  >
    <el-tabs
        v-model="activeName"
        :class="single ? 'single-demo-tabs' : 'demo-tabs'"
    >
      <el-tab-pane label="设备信息 " name="first">
        <div>
          <div class="content-line">
            <span>无人机品牌</span>
            <span class="contant"
            ><div class="box">{{ "-" }}</div></span
            >
          </div>
          <div class="content-line">
            <span>无人机型号</span>
            <span class="contant"
            ><div class="box">
                    DJI Avata
              </div></span
            >
          </div>
          <div class="content-line">
            <span>飞控序列号</span>
            <span class="contant"
            ><div class="box">
                {{ "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>电子身份证</span>
            <span class="contant"
            ><div class="box">
                {{ "-" }}
              </div></span
            >
          </div>
          <div class="content-line">
            <span>起飞时间</span>
            <span class="contant"
            ><div class="box">
              2024-01-14 17:37:58
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机坐标</span>
            <span class="contant"
            ><div class="box">
                120.21397506 30.21850585
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机速度</span>
            <span class="contant"
            ><div class="box">
              2.20 米/s
              </div></span
            >
          </div>
          <div class="content-line">
            <span>无人机高度</span>
            <span class="contant"
            ><div class="box">
               86.00米
              </div></span
            >
          </div>
          <div class="content-line">
            <span>方向角</span>
            <span class="contant"
            ><div class="box">
                {{ "-" }}
              </div></span
            >
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="飞手信息" name="third">
        <div class="noAvailable">
          暂无数据
        </div>
      </el-tab-pane>
      <el-tab-pane label="飞行计划" name="fourth">
        <div class="noAvailable">暂无数据</div>
      </el-tab-pane>
    </el-tabs>
    <div
        :style="
        single
          ? 'display: flex; justify-content: center; margin-top: 20px'
          : 'display: flex; justify-content: center; margin-top: 42px'
      "
    >
      <div
          class="goBack"
          :style="single ? 'font-size: 12px;' : 'font-size: 16px;'"
          @click="tabsVisibleClose"
      >
        关闭
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineEmits } from "vue";

defineExpose({
  tabsVisibleClose,
});

const emits = defineEmits([
  "showWaringTabs2 "
]);
const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
  visible: {
    type: Boolean,
    default: false
  }
});

// 弹窗当前显示tab
const activeName = ref('first');

/**
 * @关闭弹窗
 * */
function tabsVisibleClose() {
  emits("showWaringTabs2");
}

</script>

<style lang="scss" scoped>
.single-tabs-container {
  border: 1px red solid;
  position: absolute;
  z-index: 100;
  width: 428px;
  padding: 15px 20px 19px;
  /* height: 530px; */
  top: 200px;
  left: 200px;
  border-radius: 7px;
  background-color: rgba(9, 27, 35, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* overflow: hidden; */

  border: 1px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 3s linear infinite;

  :deep .el-tabs__item {
    color: #ffffff;
    font-size: 14px;
  }

  :deep .el-tabs__item:hover {
    color: #00fcff;
  }

  :deep .el-tabs__item.is-active {
    color: #00fcff;
  }

  /* 去掉tabs标签栏下的下划线 */
  :deep .el-tabs__nav-wrap::after {
    position: static !important;
    /* background-color: #fff; */
  }

  /* 下划线切换高亮 */
  :deep .el-tabs__active-bar {
    background-color: #00fcff;
  }
}

.tabs-contanier {
  border: 1px red solid;
  position: absolute;
  z-index: 100;
  width: 428px;
  /* height: 530px; */
  top: 200px;
  left: 200px;
  padding: 15px 30px 19px;
  border-radius: 7px;
  background-color: rgba(9, 27, 35, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* overflow: hidden; */

  border: 1px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 3s linear infinite;

  :deep .el-tabs__item {
    color: #ffffff;
    font-size: 20px;
  }

  :deep .el-tabs__item:hover {
    color: #00fcff;
  }

  :deep .el-tabs__item.is-active {
    color: #00fcff;
  }

  /* 去掉tabs标签栏下的下划线 */
  :deep .el-tabs__nav-wrap::after {
    position: static !important;
    /* background-color: #fff; */
  }

  /* 下划线切换高亮 */
  :deep .el-tabs__active-bar {
    background-color: #00fcff;
  }
}

.noAvailable {
  font-size: 16px;
  color: #909399;
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes rotate {
  0% {
    border: 1px rgba(255, 255, 255, 0.4) solid;
  }
  50% {
    border: 1px #ffffff solid;
  }
  100% {
    border: 1px rgba(255, 255, 255, 0.4) solid;
  }
}

.single-demo-tabs > :deep .el-tabs__content {
  color: #e6e6e6;
  font-size: 12px;
  height: 350px;
  padding-right: 15px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */

  .content-line {
    padding: 15px 0;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contant {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // display: block;
      text-align: right;
      width: 247px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */

      .el-checkbox {
        margin-right: 5px;
        height: 100%;
      }

      .box {
        width: 247px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }

    img {
      width: 130px;
      height: 70px;
    }
  }

  .divider {
    border: 1px solid #ffffff;
  }

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.3);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}

.demo-tabs > :deep .el-tabs__content {
  color: #e6e6e6;
  font-size: 16px;
  height: 350px;
  padding-right: 15px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */

  .content-line {
    padding: 15px 0;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contant {
      display: block;
      text-align: right;
      width: 247px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */

      .el-checkbox {
        margin-right: 5px;
        height: 100%;
      }

      .box {
        width: 100%;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }
  }

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.3);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}

.goBack {
  width: 107px;
  height: 33px;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  font-family: PingFang SC;
  background-color: rgba(0, 168, 255, 0.6);
  border: 0.6px rgba(255, 255, 255, 0.6) solid;
  //border: 1px solid;
  //border-image: linear-gradient(160deg, white 0%, rgba(9, 27, 35, 0.8) 100%) 0.5;
  border-radius: 0px 5px 0px 5px;
  animation: rotate 2s linear infinite;
  cursor: pointer;
}

@keyframes rotate {
  0% {
    border: 0.6px rgba(255, 255, 255, 0.4) solid;
  }
  50% {
    border: 0.8px #ffffff solid;
  }
  100% {
    border: 0.6px rgba(255, 255, 255, 0.4) solid;
  }
}
</style>

<style lang="scss">
#tabCard {
  .el-tabs .el-tabs__header .el-tabs__nav-wrap {
    .el-tabs__nav {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      float: none !important;
    }
  }

  .el-checkbox .el-checkbox__input {
    .el-checkbox__inner,
    .el-checkbox__original {
      background: transparent;
      border: 1px solid #00fcff;
    }
  }
}
</style>
